import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { RcmHeaderLeft, RcmHeaderRight, RcmHeaderWrapper } from './style'

interface IProps {
  title: string
  keywords?: Array<string>
  showIcon: boolean
  right: ReactNode
  children?: ReactNode
}

const HeaderRcm: FC<IProps> = (props) => {
  const { title, keywords, showIcon, right } = props
  return (
    <RcmHeaderWrapper>
      <RcmHeaderLeft>
        <h2 className="hot-title">
          <a href="/discover/recommend" className="no-link hot-text">
            {title}
          </a>
        </h2>
        <ul className="keywords">
          {keywords &&
            keywords.map((item) => {
              return (
                <li className="item" key={item}>
                  <a
                    href="/"
                    onClick={(e) => {
                      e.preventDefault()
                    }}
                  >
                    {item}
                  </a>
                  {keywords.length === 1 ? '' : <span className="line">|</span>}
                </li>
              )
            })}
        </ul>
      </RcmHeaderLeft>
      <RcmHeaderRight>
        <span>{right}</span>
        {showIcon && <i className="icon"></i>}
      </RcmHeaderRight>
    </RcmHeaderWrapper>
  )
}

export default memo(HeaderRcm)
